<template>
    <div class="live">
        <swiper :swiperList="swiperList"></swiper>
        <div class="live-mui-table-view">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <!--没有写-->
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-icon-extra mui-icon-extra-custom"></span>
                    <div to="" class="mui-media-body">演唱会</div>
                </li>
                <!--没有写-->
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-icon-extra mui-icon-extra-classroom"></span>
                    <div to="" class="mui-media-body">音乐视频</div>
                </li>
                <!--没有写-->
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-icon-extra mui-icon-extra-prech"></span>
                    <div to="" class="mui-media-body">购票</div>
                </li>
                <!--没有写-->
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-icon-extra mui-icon-extra-addpeople"></span>
                    <div class="mui-media-body">K歌</div>
                </li>
            </ul>
        </div>
<!--        <div v-for="(item,index) in secnseList" :key="index">-->
         <div class="section" v-for="(item,index) in secnseList" :key="index">
             <div  class="section-title">
                 {{item.scenetypename}}
                 <span class="findMore">更多 ></span>
             </div>

                 <div  class="section-content"  v-for="(data,k) in item.secnce" :key="k">
                     <div class="item">
<!--                         <img :src="data.sceneimg" class="item-img" />-->
                         <video   class="pSmall"
                                  :src="data.sceneimg"
                                  alt="加载失败"
                                  controls="controls">



                            </video>

                         <p class="item-name">{{data.scenename}}</p>
                     </div>
                 </div>

         </div>
<!--        </div>-->
<!--        &lt;!&ndash; section 开始 &ndash;&gt;-->
<!--        <div class="section">-->
<!--            <div class="section-title">-->
<!--                精选推荐-->
<!--                <span class="findMore">更多 ></span>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/1.gif" class="item-img" />-->
<!--                    <p class="item-name">SHINee新歌感受心意，MV中珉豪小声话语让好难过</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/2.jpg" class="item-img" />-->
<!--                    <p class="item-name">《红尘客栈》红尘客栈风似刀，骤雨落，宿命敲</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/3.jpg" class="item-img" />-->
<!--                    <p class="item-name">徐炳超《无能为力》  虐心还原少年音乐追梦旅</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/4.jpg" class="item-img" />-->
<!--                    <p class="item-name">周杰伦《她的睫毛》，新颖洒脱，充满自由甜蜜的气息</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- section 结束 -->
        <!-- section 开始 -->
<!--        <div class="section">-->
<!--            <div class="section-title">-->
<!--                电影故事·无法替代的影视原声-->
<!--                <span class="findMore">更多 ></span>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/5.gif" class="item-img" />-->
<!--                    <p class="item-name">《不期而遇》你像璀璨的烟火，绽放我的脑海里</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/6.jpg" class="item-img" />-->
<!--                    <p class="item-name">《少年的你》如何守护彼此成为想成为的成年人的故事</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/7.jpg" class="item-img" />-->
<!--                    <p class="item-name">《一百年很长吗》渡过这一关，我们就能好好活了</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/8.jpg" class="item-img" />-->
<!--                    <p class="item-name">《星辰大海》易烊千玺率众星倾情献唱</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- section 结束 -->
        <!-- section 开始 -->
<!--        <div class="section">-->
<!--            <div class="section-title">-->
<!--                音源女王·闪闪发光的奇异朋友-->
<!--                <span class="findMore">更多 ></span>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/9.gif" class="item-img" />-->
<!--                    <p class="item-name">Taloyer Swift最新专辑，诉说令人感动的故事</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/10.jpg" class="item-img" />-->
<!--                    <p class="item-name">sisp《我的舞台》，女子力爆棚，满屏幕的青春感</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/11.jpg" class="item-img" />-->
<!--                    <p class="item-name">小潘潘《学猫叫》，令人心动的旋律</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/12.jpg" class="item-img" />-->
<!--                    <p class="item-name">那些空灵动听的欧美女声，阐释唯美</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- section 结束 -->
        <!-- section 开始 -->
<!--        <div class="section">-->
<!--            <div class="section-title">-->
<!--                广阔天地·少年凌云而来-->
<!--                <span class="findMore">更多 ></span>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/13.gif" class="item-img" />-->
<!--                    <p class="item-name">EXO 《Love Shot》高清MV，最新爆料，震撼来袭</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/14.jpg" class="item-img" />-->
<!--                    <p class="item-name">黄明昊个人单曲《PICK UP THE PHONE》，你爱了吗</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/15.jpg" class="item-img" />-->
<!--                    <p class="item-name">大山《我不寂寞 我很好》，这就是成年人的生活</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/16.jpg" class="item-img" />-->
<!--                    <p class="item-name">张奕凡《安静时刻》，此刻无声胜有声</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- section 结束 -->
        <!-- section 开始 -->
<!--        <div class="section">-->
<!--            <div class="section-title">-->
<!--                不拘一格·个性live-->
<!--                <span class="findMore">更多 ></span>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/17.gif" class="item-img" />-->
<!--                    <p class="item-name">终于等来大结局，会不会是happy ending</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/18.jpg" class="item-img" />-->
<!--                    <p class="item-name">汪苏泷新专辑《克制凶猛》同名先导EP曝光</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="section-content">-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/19.jpg" class="item-img" />-->
<!--                    <p class="item-name">吴亦凡最新专辑MV，满满的中国风</p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <img src="../assets/img/livePic/20.jpg" class="item-img" />-->
<!--                    <p class="item-name">《我不退缩》赞颂疫情防控一线的英雄们</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- section 结束 -->
    </div>
</template>

<script>
    import { getAllSwiper } from "../utils/index";
    import Swiper from "../components/Swiper.vue";
    import axios from "axios";
    export default {
        name: "Live",
        components: {
            Swiper,
        },
        props: {},
        data() {
            return {
                swiperList: [],
                secnseList: []
            };
        },
        created() {
            // 获取轮播图数据
            this.getSwiperList();
            // 获取现场
            this.getSecnse();
        },
        methods: {
            getSwiperList() {
                // eslint-disable-next-line no-irregular-whitespace
                // 获取轮播图数据方法
                getAllSwiper()
                    .then((res) => {
                        this.swiperList = res.slice(6, 11);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            //查询现场
            getSecnse() {
                axios.get("http://localhost:8888/secnse",).then(res => {
                    console.log(res.data)
                    this.secnseList = res.data;
                    console.log(this.secnseList)
                    // //通过歌曲id获取歌曲信息
                    // for (let item of this.collection) {
                    //     this.getSongsOfIds(item.songId);
                    // }
                }).catch(err => {
                        console.log(err)
                    }
                )
            }
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    .section {
        .section-title {
            // 标题样式
            text-align: left;
            padding: 0 0.5em;
            font-weight: bolder;
            margin-bottom: 0.5em;
            .findMore {
                font-size: 0.75em;
                font-weight: 100;
                float: right;
                letter-spacing: 0;
            }
        }
        .section-content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            overflow: hidden;
            padding: $padding-out;
            .item {
                width: 100%;
                .item-img {
                    width: 98%;
                    min-height: 3.25em;
                    border-radius: 5%;
                }
                .item-name {
                    text-align: left;
                    min-height: 2em;
                }
            }
        }
    }

    .item:nth-child(odd){
        padding-right: .25em;
    }

    .item:nth-child(even){
        padding-left: .25em;
    }
    li {
        display: inline;
    }

    .mui-grid-view.mui-grid-9 {
        // 九宫格背景
        background-color: #fff;
        border: none;
        // 九宫格按钮左右两端对齐
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mui-grid-view.mui-grid-9::after {
        // 不加这个属性无法实现两端对齐
        display: none;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        margin: 0;
        padding: .5em .5em;
        border: none;
    }

    .mui-icon-extra {
        // 九宫格图标颜色
        color: #26a2ff;
    }

    li.mui-table-view-cell {
        // 每个按钮分配空间相同
        width: 5.25em;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        font-size: 0.75em;
        text-overflow: clip;
    }


</style>
